<template>
  <div id="container"></div>
</template>

<script>

import loader from "@/api/third/AMapLoader";
import { getAddress } from "@/api/third/map";

export default {
  name: "map-view",
  props:{
    location: Object,
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  data() {
    return {
      map: null,
      marker: null
    }
  },
  methods: {
    initAMap() {
      loader.then(AMap => {
        this.confirm("消息","点击地图选择地点")
        this.map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
        });
        this.map.plugin(["AMap.AutoComplete", "AMap.ToolBar", "AMap.Geolocation", "AMap.HawkEye", "AMap.Marker", "AMap.CitySearch"], () => {

          // 编辑回填地图标记点
          if (Object.keys(this.location).length){
            let lngLat = new AMap.LngLat(this.location.lng,this.location.lat);
            this.marker = new AMap.Marker({map: this.map, position: lngLat});
          }

          // IP定位获取当前城市信息
          let citySearch = new AMap.CitySearch()
          citySearch.getLocalCity(function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              // 查询成功，result即为当前所在城市信息
              // console.log(result)
            }
          })

          //加载工具条
          let tool = new AMap.ToolBar();
          let geolocation = new AMap.Geolocation({
            timeout: 10000, // 设置定位超时时间，默认：无穷大
            offset: [18, 100],// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: false, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB' // 定位按钮的排放位置,  RB表示右下
          })

          geolocation.getCurrentPosition(function(status,result){
          //   if (status === 'complete') {
          //     onComplete(result)
          //   } else {
          //     onError(result)
          //   }
          });

          function onComplete (data) {
            // data是具体的定位信息
            // console.log(data)
          }

          function onError (data) {
            // 定位出错
          }

          this.map.addControl(tool);
          this.map.addControl(geolocation);

          let hawkEye = new AMap.HawkEye({autoMove: true, showButton: true})
        });

        //为地图注册click事件获取鼠标点击出的经纬度坐标
        this.map.on('click', e => {
          if (this.marker != null) this.map.remove(this.marker);
          let lngLat = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
          this.marker = new AMap.Marker({map: this.map, position: lngLat});
          this.alertConfirm(this, e)
        })
      });
    },

    alertConfirm(object, e) {
      let location = {"lng": e.lnglat.getLng(), "lat": e.lnglat.getLat()}
      let address = null;
      getAddress(e.lnglat.getLng(), e.lnglat.getLat()).then(response =>{
        address = response.formatted_address
      });
      this.$confirm('是否选取该点', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'})
          .then(() => {
            this.$message({type: 'success', message: '选取成功'});
            object.$emit("location", location)
            object.$emit("address", address)
          })
      .catch(() => {this.$message({type: 'info', message: '已取消选取'});});
    },
    confirm(title, message) {this.$notify.info({title: title, message: message, duration: 3000});}
  }
}
</script>

<style scoped lang="scss">

#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 600px;
}
</style>
